import { Component } from 'react'
import {View, Text } from '@tarojs/components'
import './index.scss'

export default class LgCountDown extends Component {
  state = {
    day: this.props.day || 0,
    hour: this.props.hour || 0,
    minute: this.props.minute || 0,
    second: this.props.second || 0,
    roundCStyle: ""
  }
  

  componentDidMount () {
    var that = this, type = this.props.type;
    if (type == "B") {
      if (!this.state.day && !this.state.hour && !this.state.minute && !this.state.second) return;
      var inter = setInterval(() => {
        var day = this.state.day, 
            hour = this.state.hour,
            minute = this.state.minute,
            second = this.state.second;
        if (second == 0) {
          if (minute == 0) {
            if (hour == 0) {
              if (day == 0) {
                clearInterval(inter);
                that.props.handleEnd && that.props.handleEnd();
                return;
              } else {
                day --;
                hour = 23;
                minute = 59;
                second = 59;
              }
            } else {
              hour --;
              minute = 59;
              second = 59;
            }
          } else {
            minute --;
            second = 59;
          }
        } else {
          second --;
        }
        that.setState({day: day, hour: hour, minute: minute, second: second});
      }, 1000)
    } else if (type == "C") {
      if (!this.state.second) return;
      var inter = setInterval(() => {
        if (that.state.second <= 0) {
          clearInterval(inter);
          that.props.handleEnd && that.props.handleEnd();
        } else {
          var roundCStyle = that.state.roundCStyle ? "" : {borderColor: "rgba(1, 150, 255, 0.14)"};
          that.setState({second: that.state.second - 1, roundCStyle: roundCStyle})
        }
      }, 1000)
    } else {
      if (!this.state.hour && !this.state.minute && !this.state.second) return;
      var inter = setInterval(() => {
        var hour = this.state.hour,
            minute = this.state.minute,
            second = this.state.second;
        if (second == 0) {
          if (minute == 0) {
            if (hour == 0) {
                clearInterval(inter);
                that.props.handleEnd && that.props.handleEnd();
                return;
            } else {
              hour --;
              minute = 59;
              second = 59;
            }
          } else {
            minute --;
            second = 59;
          }
        } else {
          second --;
        }
        that.setState({hour: hour, minute: minute, second: second});
      }, 1000)
    }
  }

  componentDidShow () {}

  componentDidHide () {}

  componentDidCatchError () {}
  formatATime(time) {
    return (time > 9) ? time : "0" + time;
  }
  render () {
    var props = this.props; 
    // console.log(this.state);
    var className = props.className || "", type = this.props.type;
      if (type == "B") {
        return (
          <View className={"lg_count_down_B " + className} style={props.style || {}}>
            <Text className="lg_count_down_B_title">剩余</Text>
            <Text className="lg_count_down_B_time">{this.state.day}</Text>
            <Text className="lg_count_down_B_attr">天</Text>
            <Text className="lg_count_down_B_time">{this.state.hour}</Text>
            <Text className="lg_count_down_B_attr">时</Text>
            <Text className="lg_count_down_B_time">{this.state.minute}</Text>
            <Text className="lg_count_down_B_attr">分</Text>
            <Text className="lg_count_down_B_time">{this.state.second}</Text>
            <Text className="lg_count_down_B_attr">秒</Text>
          </View>
        )
      } else if (type == "C") {
        return (
          <View className={"lg_count_down_C " + className} style={props.style || {}}>
            <View className="lg_count_down_C_warp">
              <View className="lg_count_down_C_round" style={this.state.roundCStyle}>
                <View className="lg_count_down_C_round1">
                  <View className="lg_count_down_C_value">{this.state.second}</View>
                </View>
                <View className="lg_count_down_C_title">倒计时</View>
              </View>
            </View>
        </View>
        ) 
      } else {
        return (
          <View className={"lg_count_down_A " + className} style={props.style || {}}>
            <Text className="lg_count_down_A_title">还剩</Text>
            <View className="lg_count_down_A_time">
              <View className='lg_count_down_A_num'>{this.formatATime(this.state.hour)}</View>:
             <View className='lg_count_down_A_num'>{this.formatATime(this.state.minute)}</View>:
              <View className='lg_count_down_A_num'>{this.formatATime(this.state.second)}</View></View>
          </View>
        )
      }
  }
}